<template>
  <div>
    <v-nav :current="'3'" :langType="lang" :lang="lang" @EnData="EnData" @ChData="ChData" :isEnShow="false"></v-nav>
    <div class="banner-s">
      <img src="@/assets/banner.jpg" alt="" style="width: 100%;border: 0">
    </div>
    <div class="title">
      <h1>{{title}}</h1>
    </div>
    <div class="main">
      <div class="items">
        <router-link :to="{name: 'newsDetails', params: {id: list.id}}" tag="div" class="item" v-for="list in lists" :key="list.id">
          <div class="img-div">
            <img :src="list.src" alt="">
          </div>
          <div class="describe">
            <div>
              <h1>{{list.post_title}}</h1>
              <p>{{list.post_excerpt}}</p>
            </div>
            <div class="to-details">
              <router-link :to="{name: 'newsDetails', params: {id: list.id}}" tag="a"><span>{{details}}</span><img src="@/assets/home/blue.png" alt=""></router-link>
              <span>{{list.time}}</span>
            </div>
          </div>
        </router-link>
        <!-- 分页 -->
        <div style="display:flex;justify-content: center;margin-top: 49px;margin-bottom: 66px">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="6"
            @current-change="handleCurrentChanges"
            >
          </el-pagination>
        </div>
      </div>
      <div class="sec-right">
        <search @search="search"></search>
        <div class="r-t">
          <div class="line">
            <div></div>
          </div>
          <h1>{{recommend}}</h1>
          <div id="box">
            <ul id="con1" ref="con1" :class="{anim:animate==true}">
              <router-link :to="{name: 'newsDetails', params: {id: list.id}}" tag="li" class="news" v-for="list in listtjs" :key="list.id">
                <h2>{{list.post_title}}</h2>
                <p>{{list.post_excerpt}}</p>
              </router-link>
            </ul>
          </div>
        </div>
        <!-- <div class="r-t">
          <div class="line">
            <div></div>
          </div>
          <h1>{{Announcement}}</h1>
          <div class="news">
            <h2>公司决定放假放假放假放假放假放假...</h2>
            <p>6月22日，广安市召开了“以产业为主的项目投资和经济形势分析会”，会议现场...</p>
          </div>
        </div> -->
      </div>
    </div>
    <vFooter></vFooter>
  </div>
</template>

<script>
import vNav from '@/components/nav.vue'
import vFooter from '@/components/footer.vue'
import search from '@/components/search/search.vue'
import tabLine from '@/components/tabLine.vue'
import {mapGetters} from 'vuex'
import { getNewsData, getNewsSearchData, getTuiJianData } from '@/services/api.js'
import { getNewsDataEn } from '@/services/api_en.js'
export default {
  name: 'news',
  data () {
    return {
      title: null,
      details: null,
      recommend: null,
      Announcement: null,
      total: null,
      lists: [],
      listtjs: [],
      page: 1,
      animate: false
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang'
    })
  },
  components: {
    vNav,
    vFooter,
    search,
    tabLine
  },
  methods: {
    _getChList (searchWord) {
      this.title = '新闻中心'
      this.details = '查看详情'
      this.recommend = '推荐新闻'
      this.Announcement = '公司公告'
      let params = {
        page: this.page
      }
      getNewsData(params).then((res) => {
        this.lists = res.data
        for (let k in this.lists) {
          if (!!this.lists[k].post_title) {
            this.lists[k].post_title = this.lists[k].post_title.substring(0, 15) + '...'
            this.lists[k].post_excerpt = this.lists[k].post_excerpt.substring(0, 53) + '...'
            // this.lists[0].post_excerpt = this.lists[k].post_excerpt.substring(0, 46) + '...'
            // this.lists[1].post_excerpt = this.lists[k].post_excerpt.substring(0, 46) + '...'
          } else {
            this.lists[k].post_title = ''
            this.lists[k].post_excerpt = ''
          }
        }
        this.total = res.total
        this.tuijianData = res.data[0]
        console.log(this.tuijianData)
      })
      getTuiJianData().then((res) => {
        this.listtjs = res
        for (let k in this.listtjs) {
          if (!!this.listtjs[k].post_title) {
            this.listtjs[k].post_title = this.listtjs[k].post_title.substring(0, 15) + '...'
            this.listtjs[k].post_excerpt = this.listtjs[k].post_excerpt.substring(0, 40) + '...'
          } else {
            this.listtjs[k].post_title = ''
            this.listtjs[k].post_excerpt = ''
          }
        }
      })
    },
    _getEnList () {
      this.title = 'News Center'
      this.details = 'details'
      this.recommend = 'Recommend News'
      this.Announcement = 'Announcement'
      let params = {
        page: this.page
      }
      getNewsDataEn(params).then((res) => {
        // this.lists = res.data
        // this.total = res.total
        this.total = 7
        // this.tuijianData = res.data[0]
        this.lists = [
          {
            id: 1,
            post_title: 'sdf dsgdg dfgdf ddbdsw sfs2',
            post_excerpt: 'sdfsskfsofgspsdfg'
          },
          {
            id: 2,
            post_title: 'sdf dsgdg dfgdf ddbdsw sfs2',
            post_excerpt: 'sdfsskfsofgspsdfg'
          },
          {
            id: 3,
            post_title: 'sdf dsgdg dfgdf ddbdsw sfs2',
            post_excerpt: 'sdfsskfsofgspsdfg'
          }
        ]
      })
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
      }
      if (this.lang === 2) {
        this._getEnList()
      }
    },
    EnData (res) {
      this._getChList()
    },
    ChData (res) {
      // this._getEnList()
    },
    handleCurrentChanges  (val) {
      this.page = val
      console.log(this.page)
      this.version()
    },
    search (searchWord) {
      console.log(searchWord)
      this.version(searchWord, 1)
      let params = {
        searchWord: searchWord
      }
      getNewsSearchData(params).then((res) => {
        this.lists = res.data
        this.total = 1
      })
    },
    scroll () {
      this.animate = true
      setTimeout(() => {
        this.listtjs.push(this.listtjs[0])
        this.listtjs.shift()
        this.animate = false
      },2500)
    }
  },
  created () {
    this.version()
    setInterval(this.scroll,3500)
    window.scrollTo(0, 0)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #box{
    height: 442px;
    transition: all 0.5s;
    overflow: hidden;
  }
  .anim{
    transition: all 1.5s;
    margin-top: -133px;
  }
  .title {
    width: 1200px;
    margin: 0 auto;
    margin-top: 60px;
    margin-bottom: 83px;
  }
  .title h1 {
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 3px;
    color: #333333;
  }
  .main {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto
  }
  .items {
    width: 800px;
    .item {
      padding: 27px 0;
      border-top: 1px solid #e6e6e6;
      // border-bottom: 1px solid #747272;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      .img-div {
        width: 280px;
        height: 180px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%
        }
      }
      .describe {
        width: 486px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        div {
          h1 {
            font-size: 20px;
            color: #000;
            margin-bottom: 15px;
            font-weight: normal;
          }
          p {
            letter-spacing: 1px;
            color: #666666;
            font-size: 14px
          }
          a {
            text-decoration: none;
            display: flex;
            align-items: center;
            span {
              font-size: 16px;
              color: #0044c2;
              margin-right: 6px
            }
          }
          a span:nth-child(2){
            font-size: 30px;
            color: #0044c2;
            margin-left: 26px
          }
          span {
            font-size: 16px;
            color: #999999;
          }
        }
        .to-details {
          display: flex;
          justify-content: space-between;
          align-items: baseline
        }
      }
    }
    .item:hover .img-div img {
      transform: scale(1.1);
      transition: all 1s
    }
    .item:last-child() {
      border-bottom: 1px solid #e6e6e6;
    }
  }
  .sec-right {
    width: 340px;
    .r-t {
      margin-bottom: 28px;
      height: 442px;
      // overflow-y: scroll;
      overflow: hidden;
      .line {
        width: 100%;
        height: 4px;
        background-color: #dbdbdb;
        >div {
          width: 105px;
          height: 4px;
          background-color: #2154b9
        }
      }
      h1 {
        font-size: 24px;
        letter-spacing: 1px;
        color: #2053b9;
        margin-top: 5px
      }
      .news {
        margin-top: 28px;
        padding: 10px;
        h2 {
          font-size: 20px;
          color: #000;
          margin-bottom: 5px;
          font-weight: normal
        }
        p {
          font-size: 14px;
          color: #666;
          line-height: 28px
        }
      }
      .news:hover {
        background-color: #e6e6e6;
        cursor:pointer;
      }
    }
  }
</style>
